<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
    </style>
  </head>
  <body>
    <footer>
      <p>Copyright nobody; example written by <a href="#"><context-span class="footer">Chris Mills</context-span></a></p>
    </footer>
  </body>
</html>
<script>
class ContextSpan extends HTMLElement {
  constructor() {
    super();

    const style = document.createElement('style');
    const span = document.createElement('span');
    span.textContent = this.textContent;

    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(style);
    shadowRoot.appendChild(span);

    style.textContent = `
      span:hover { text-decoration: underline; }
      :host-context(h1) { font-style: italic; }
      :host-context(h1):after { content: " - no links in headers!" }
      :host(.footer) { color : red; }
      :host { background: rgba(0,0,0,0.1); padding: 2px 5px; }
    `;
  }
}

// Define the new element
customElements.define('context-span', ContextSpan);
</script>